<template>
  <div class="form-container">
    <vab-query-form>
      <vab-query-form-right-panel :span="24">
        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
          {{ $t('order.newAdd') /*新增*/ }}
        </el-button>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table :data="list">
      <!-- <el-table-column show-overflow-tooltip type="selection"></el-table-column> -->
      <el-table-column
        show-overflow-tooltip
        prop="version"
        :label="$t('order.name') /*玩法名称*/"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="ver_name"
        label="版本名称"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="version"
        label="版本"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="is_force"
        label="强制更新"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="pkg_size"
        label="size"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="pkg_url"
        label="url"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="pkg_mark"
        label="mark"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        :label="$t('common.operate') /*操作*/"
        width="300"
      >
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">
            {{ $t('accountManage.edit') /*编辑*/ }}
          </el-button>
          <el-button type="text" @click="handleDelete(row)">
            {{ $t('accountManage.delete') /*删除*/ }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit ref="edit" @fetch-data="getPackList"></edit>
  </div>
</template>

<script>
  import Edit from './components/UserManagementEdit'
  import { getPackageList, delPackage } from '@/api/business.js'
  export default {
    name: 'Form',
    components: { Edit },
    data() {
      return {
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur',
            },
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' },
          ],
          type: [
            {
              type: 'array',
              required: true,
              message: '请至少选择一个活动性质',
              trigger: 'change',
            },
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' },
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' },
          ],
        },
        list: [],
      }
    },
    created() {
      this.getPackList()
    },
    methods: {
      getPackList() {
        getPackageList().then((res) => {
          if (res.code == 0) {
            this.list = res.data
          }
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      handleEdit(row) {
        if (row.pkg_id) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit('')
        }
      },
      handleDelete(row) {
        if (row.pkg_id) {
          this.$baseConfirm(
            `${this.$t(
              'accountManage.areYouSureDeleteCurrent'
            )}` /*你确定要删除当前项吗*/,
            null,
            async () => {
              const { msg } = await delPackage({ pkg_id: row.pkg_id })
              this.$baseMessage(msg, 'success')
              this.getPackList()
            }
          )
        }
      },
    },
  }
</script>
